<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        width: auto;
        height: 700px;
        display: flex;
        justify-content: center;
        align-items: center;
       }/*设置container的位置 */
    .container {
        width: 500px;
        height: 100px;
        background-color: hsl(0, 8%, 88%);
        display: flex;
        justify-content: center;
        border-radius: 15px;
    }/*设置container的样式*/
    a{
        text-decoration: none;/*取消超链接下划线*/
        color: black;
        font-size: 12px;/*字体大小*/
    }

    #box1 {
        background: url(./首页off.png);
        background-size: 40px ;/*设置背景图片大小*/
        background-repeat: no-repeat;/*背景图片不重复*/
        background-position: 50% 36%;/*设置背景图片位置*/
        flex: 1;
        display:flex;
        flex-direction: column;/*纵向排列*/
        justify-content: space-around;/*文本超链接的位置*/
        align-items: center;/*文本超链接的位置*/
        user-select: none;/*文本不可选中*/
    }

    .box2 {
        background-image: url(./分类\off.png);
        background-size: 40px ;
        background-repeat: no-repeat;
        background-position: 50% 36%;
        flex: 1;
        display:flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        user-select: none;
    }

    .box3 {
        background-image: url(./星球\off.png);
        background-size: 40px ;
        background-repeat: no-repeat;
        background-position: 50% 36%;
        flex: 1;
        display:flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        user-select: none;
    }

    .box4 {
        background-image: url(./购物车空\off.png);
        background-size: 40px ;
        background-repeat: no-repeat;
        background-position: 50% 36%;
        flex: 1;
        display:flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        user-select: none;
    }

    .box5 {
        background-image: url(我的\off.png);
        background-size: 40px ;
        background-repeat: no-repeat;
        background-position: 50% 36%;
        flex: 1;
        display:flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        user-select: none;
    }
</style>

<body>
    <div class="container">
        <div id="box1">
            <a href="https://www.mi.com/shop"></a>
            <a href="https://www.mi.com/shop">首页</a>
        </div>
        <div class="box2">
            <a href="https://www.mi.com/shop"></a>
            <a href="https://www.mi.com/shop">分类</a>
        </div>
        <div class="box3">
            <a href="https://www.mi.com/shop"><img></img></a>
            <a href="https://www.mi.com/shop">米圈</a>
        </div>
        <div class="box4">
            <a href="https://www.mi.com/shop"></a>
            <a href="https://www.mi.com/shop">购物车</a>
        </div>
        <div class="box5">
            <a href="https://www.mi.com/shop"></a>
            <a href="https://www.mi.com/shop">我的</a>
        </div>
    </div>
    <script>
        var box1 = document.querySelector('#box1');
        var box2 = document.querySelector('.box2');
        var box3 = document.querySelector('.box3');
        var box4 = document.querySelector('.box4');
        var box5 = document.querySelector('.box5');
        
        box1.onclick = function(){
            box1.style.backgroundImage = "url('./首页\ on.png')"
            box2.style.backgroundImage = "url('./分类off.png')"
            box3.style.backgroundImage = "url('./星球off.png')"
            box4.style.backgroundImage = "url('./购物车空off.png')"
            box5.style.backgroundImage = "url('./我的off.png')"
        }
        box2.onclick = function(){
            box1.style.backgroundImage = "url('./首页off.png')"
            box2.style.backgroundImage = "url('./分类\ on.png')"
            box3.style.backgroundImage = "url('./星球off.png')"
            box4.style.backgroundImage = "url('./购物车空off.png')"
            box5.style.backgroundImage = "url('./我的off.png')"
        }
        box3.onclick = function(){
            box1.style.backgroundImage = "url('./首页off.png')"
            box2.style.backgroundImage = "url('./分类off.png')"
            box3.style.backgroundImage = "url('./星球\ on.png')"
            box4.style.backgroundImage = "url('./购物车空off.png')"
            box5.style.backgroundImage = "url('./我的off.png')"
        }
        box4.onclick = function(){
            box1.style.backgroundImage = "url('./首页off.png')"
            box2.style.backgroundImage = "url('./分类off.png')"
            box3.style.backgroundImage = "url('./星球off.png')"
            box4.style.backgroundImage = "url('./购物车空\ on.png')"
            box5.style.backgroundImage = "url('./我的off.png')"
        }
        box5.onclick = function(){
            box1.style.backgroundImage = "url('./首页off.png')"
            box2.style.backgroundImage = "url('./分类off.png')"
            box3.style.backgroundImage = "url('./星球off.png')"
            box4.style.backgroundImage = "url('./购物车空off.png')"
            box5.style.backgroundImage = "url('./我的\ on.png')"
        }
        
    </script>
</body>
</html>